<template>
    <div class="member-layout">
        <div class="search-part">
            <el-row :gutter="20" class="search-part-row">
                <el-col :span="8">
                    <div class="grid-content">
                        <v-simpsearch class="simple-search" @transferParam="getParam"></v-simpsearch>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content pdt10 btns">
                        <el-button class="red-btn" @click="newColumn"> 新增栏目 </el-button>
                        <el-button class="red-btn" @click="delColumn"> 删除栏目 </el-button>
                        <el-button class="red-btn" @click="ediColumn"> 修改栏目 </el-button>
                        <el-button class="gray-btn" @click="newMess"> 新增 </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="memeber-manage-con">
            <el-table
                    :data="category"
                    border
                    style="width: 100%;box-sizing: content-box;text-align: center">
                <el-table-column
                        prop="categoryName"
                        label="所属栏目"
                        width="180"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        width="180"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="subTitle"
                        label="副标题"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="terms"
                        label="主题词"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态"
                        align="left">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="left">
                    <template scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">查看</el-button>
                        <el-button @click.native.prevent="deleteRow(scope.$index, category)" type="text" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import axios from '../../../util/http';
    import Datasource from 'vue-datasource';
    import cfg from '../../../properties';
    import vSimpsearch from '../SimpSearch.vue';
    import * as types from '../../../store/types';
    export default {
        name: 'keepalive-false',
        data: function () {
            return {
                param: '',
                category: []
            }
        },
        components: {
            Datasource, vSimpsearch
        },
        methods: {
            handleClick(index) {
                this.$router.push({
                    name: '',
                    path: '/newMess',
                    query: {item: this.category[index]}
                });
                console.log(this.category[index]);
            },
            deleteRow(index, rows) {
                let self = this;
                this.$axioxs.delete('/post/' + this.category[index].id)
                    .then(function (res) {
                            rows.splice(index, 1);
                            self.$message({
                                showClose: true,
                                type: 'error',
                                message: res.data
                            });
                        },
                        (res) => {
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: res
                            });
                        })
            },
            getParam(res){

            },
            newColumn(){
                this.$router.push({
                    name: '',
                    path: '/newColumn'
                });
            },
            ediColumn(){
                this.$router.push({
                    name: '',
                    path: '/newColumn',
                    query: {new: 'new'}
                });
            },
            delColumn(){
                let self = this;
                this.$axioxs.delete('/category/' + this.$store.state.categoryID.id)
                    .then(function (res) {
                            console.log('<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>')
                            console.log(res.data)
                            self.$store.commit(types.CATEGORY_DELETE, self.$store.state.categoryID);
//                            self.$store.commit(types.CATEGORY_ID_CHANGE, '');
                            self.$message({
                                showClose: true,
                                type: 'error',
                                message: res.data
                            });
                        },
                        (res) => {
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: res
                            });
                        })
            },
            newMess(){
                this.$router.push({
                    name: '',
                    path: '/newMess'
                });
            },
            get(){
//                http://192.168.1.136:8081/shop/pub/posts/child?id=b79339d0-5259-4603-a237-4b35b3ddf691&status=0,1&_search=false&nd=1494465710197&rows=20&page=1&sidx=id&sord=desc&_=1494465624072
                let self = this;
                this.$axioxs.get("/pub/posts/child?id=" + this.$store.state.categoryID.id + "&status=0,1")
                    .then(function (res) {
                            console.log(res.data.records)
                            self.category = res.data.records
                        },
                        (res) => {
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: res
                            });
                        })
            }
        },
        watch: {
            getCategoryId(){
            }
        },
        computed: {
            getCategoryId: function () {
                if (this.$store.state.categoryID) {
                    this.get();
                }
            }
        }
    }
</script>